<template>
	<statusBarVue title="订单确认" :isShowBar="true" :isShowLeft="true" />
	<view class="mall-comfirm-page" :style="pageHaveBarStyle">
		<view class="mall-comfirm-page-group">
			<view class="service-address" @click="goToPage('/homePages/mall/address')">
				<view class="address-user">
					<view class="address">
						<uni-icons type="location" size="28" color="#999999"></uni-icons>
						<text class="address-text">重庆璧山区铁山路重科大加速器</text>
					</view>
					<view class="user">
						柒（先生）14523568741
					</view>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</view>
		<view class="mall-comfirm-page-group">
			<view class="goods">
				<view class="goods-img">
					<image src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg"></image>
				</view>
				<view class="goods-text">
					<view class="text">
						PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块
					</view>
					<view class="nums">
						<text>共10件</text> <uni-icons type="right" size="16" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="mall-comfirm-page-group">
			<view class="price">
				<text class="tit">商品金额</text>
				<view class="price-text">
					<text class="unit">￥</text> <text class="num">4990.</text><text class="num-s">00</text>
				</view>
			</view>
		</view>
		<view class="mall-comfirm-page-group">
			<view class="invoice">
				<text class="tit">发票</text>
				<text class="emit">请下单后联系客服开具发票</text>
			</view>
		</view>

		<view class="sum">
			应付金额：
			<view class="price-text">
				<text class="unit">￥</text> <text class="num">4990.</text><text class="num-s">00</text>
			</view>
			<button class="play-btn">去支付</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.mall-comfirm-page {
		position: fixed;
		z-index: 99;
		padding: 25.52rpx 0;
		background: linear-gradient(#F1F8F7 5%, #F2F3F7 100%);
		font-family: "Arial";

		.price-text {
			.unit {
				color: #fd381d;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
			}

			.num {
				color: #f8401e;
				font-size: 50rpx;
				font-weight: 400;
			}

			.num-s {
				color: #f8401e;
				font-size: 15px;
				font-size: 30rpx;
				font-weight: 400;
			}
		}

		&-group {
			width: 94.13%;
			margin: auto;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			.service-address {
				padding: 32rpx 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.address {
					display: flex;

					.address-text {
						height: 34rpx;
						color: #3d3d3d;
						font-size: 30rpx;
						font-weight: 400;
						margin-left: 22rpx;
					}
				}

				.user {
					margin-top: 16rpx;
					color: #999999;
					font-size: 30rpx;
					font-weight: 400;
					padding-left: 9rpx;
				}
			}

			.goods {
				display: flex;
				padding: 36rpx 14rpx 46rpx 12rpx;

				&-img {
					width: 172rpx;
					height: 172rpx;
					border-radius: 14rpx;
					opacity: 1;
					box-shadow: 0 8rpx 20rpx 0 #0000002b;
					margin-right: 32rpx;

					image {
						width: 172rpx;
						height: 172rpx;
					}
				}

				&-text {
					.text {
						color: #3d3d3d;
						font-size: 28rpx;
						font-weight: 400;
					}

					.nums {
						margin-top: 70rpx;
						color: #999999;
						font-size: 24rpx;
						font-weight: 400;
						text-align: right;
					}
				}
			}


			.price>.tit,
			.invoice>.tit {
				color: #3d3d3d;
				font-size: 28rpx;
				font-weight: 400;
			}

			.price,
			.invoice {
				padding: 28rpx 26rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.invoice {
				.emit {
					color: #999999;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

		.sum {
			width: 100%;
			padding-top: 54rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 54rpx);
			padding-left: 28rpx;
			background: #ffffff;
			background-color: #fff;
			display: flex;
			align-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;

			.play-btn {
				width: 226rpx;
				height: 86rpx;
				line-height: 86rpx;
				border-radius: 43rpx;
				background: #f1302e;
				color: #fff;
				font-size: 44rpx;
				font-weight: 400;
			}
		}
	}
</style>